<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="searchForm" :inline="true" :model="ownerRoom" class="demo-form-inline" size="mini">
      <el-form-item label="类型">
        <el-select v-model="indexRoomStatus.value" placeholder="请选择绑定状态" value="" @change="comboBox(indexRoomStatus.value)">
          <el-option
            v-for="item in indexRoomStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh" @click="comboReset()">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 添加审核 -->
    <el-dialog :visible="open" width="400px" append-to-body @closed="cancel('formData')">
      <el-form ref="formData" :model="ownerRoom" label-width="90px">
        <el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="选择小区" prop="communityId">
                <el-select v-model="ownerRoom.communityId" filterable placeholder="请选择" @change="loadBuilding" style="width: 250px">
                  <el-option
                    v-for="item in Communities"
                    :key="item.communityId"
                    :label="item.communityName"
                    :value="item.communityId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="选择楼栋" prop="buildingId">
                <el-select v-model="ownerRoom.buildingId" filterable placeholder="请选择" @change="loadUnit" style="width: 250px">
                  <el-option
                    v-for="item in Buildings"
                    :key="item.buildingId"
                    :label="item.buildingName"
                    :value="item.buildingId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="选择单元" prop="unitId">
                <el-select v-model="ownerRoom.unitId" filterable placeholder="请选择" @change="loadRoom" style="width: 250px">
                  <el-option
                    v-for="item in Units"
                    :key="item.unitId"
                    :label="item.unitName"
                    :value="item.unitId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="选择房间" prop="roomId">
                <el-select v-model="ownerRoom.roomId" filterable placeholder="房间名" style="width: 250px">
                  <el-option
                    v-for="item in Rooms"
                    :key="item.roomId"
                    :label="item.roomName"
                    :value="item.roomId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="选择业主" prop="ownerId">
                <el-select v-model="ownerRoom.ownerId" filterable placeholder="业主姓名" style="width: 250px">
                  <el-option
                    v-for="item in Owners"
                    :key="item.ownerId"
                    :label="item.ownerRealName"
                    :value="item.ownerId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="ownerRoom.remark"
                type="textarea"
                placeholder="请输入备注"
                clearable
                minlength="5"
                maxlength="128"
                show-word-limit
                rows="2"
                style="width: 250px"
              />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain size="mini" @click="submitForm()">添 加</el-button>
        <el-button @click="cancel('formData')" size="mini">取 消</el-button>
      </div>
    </el-dialog>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <el-col>
        <right-toolbar
          :show-search.sync="showSearch"
          @queryTable="loadPages(current,size,ownerRoom)"
        />
      </el-col>
    </el-row>

    <el-table
      ref="multipleTable"
      :data="ownerRoomList"
      tooltip-effect="dark"
      style="width: 100%"
      size="mini"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        label="序号"
        type="index"
        :index="indexMethod"
        align="center"
      />
      <el-table-column
        label="小区名称"
        width="150px"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.communityName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="楼栋名称"
        width="120px"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.buildingName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="单元名称"
        width="120px"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.unitName }}</span>
        </template>
      </el-table-column><el-table-column
        label="房间名称"
        width="120px"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.roomName }}</span>
        </template>
      </el-table-column><el-table-column
        label="业主姓名"
        align="center"
        width="120px"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerRealName }}</span>
        </template>
      </el-table-column><el-table-column
        label="业主类型"
        width="120px"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.zoOwnerType }}</span>
        </template>
      </el-table-column><el-table-column
        label="绑定状态"
        width="120px"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.roomStatus == 'Binding'" type="success" size="mini">已绑定</el-tag>
          <el-tag v-else-if="scope.row.roomStatus == 'Auditing'" type="warning" size="mini">审核中</el-tag>
          <el-tag v-else type="danger" size="mini">审核失败</el-tag>
        </template>
      </el-table-column><el-table-column
        label="备注"
        width="140"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.remark }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.roomStatus == 'Auditing'" type="text" icon="el-icon-coordinate" @click="handleEdit(scope.row)">审核</el-button>
          <el-button v-else type="text" icon="el-icon-document" @click="auditRecords(scope.row)">审核记录</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog title="业主审核" :visible.sync="dialogFormVisible" width="600px">
      <el-form :model="ownerRoom">
        <el-form-item label="小区名称" :label-width="formLabelWidth">
          <el-input v-model="ownerRoom.communityName" autocomplete="off" disabled="disabled" />
        </el-form-item>
        <el-form-item label="楼栋名称" :label-width="formLabelWidth">
          <el-input v-model="ownerRoom.buildingName" autocomplete="off" disabled="disabled" />
        </el-form-item>
        <el-form-item label="单元名称" :label-width="formLabelWidth">
          <el-input v-model="ownerRoom.unitName" autocomplete="off" disabled="disabled" />
        </el-form-item>
        <el-form-item label="房间名称" :label-width="formLabelWidth">
          <el-input v-model="ownerRoom.roomName" autocomplete="off" disabled="disabled" />
        </el-form-item>
        <el-form-item label="业主名字" :label-width="formLabelWidth">
          <el-input v-model="ownerRoom.ownerRealName" autocomplete="off" disabled="disabled" />
        </el-form-item>
        <el-form-item label="审核备注" :label-width="formLabelWidth">
          <el-input v-model="ownerRoom.remark" type="textarea" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain size="mini" :plain="true" @click="confirmAudit(ownerRoom)">审核成功</el-button>
        <el-button type="danger" plain size="mini" @click="badAudit(ownerRoom)">审核失败</el-button>
        <el-button size="mini" @click="dialogFormVisible = false">取消操作</el-button>
      </div>
    </el-dialog>

    <el-dialog title="业主审核记录" :visible.sync="auditRecordsVisible" width="800px" :model="ownerRoomRecordList">
      <el-table
        ref="multipleTable"
        :data="ownerRoomRecordList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          label="审核人"
          prop="createBy"
          align="center"
        />
        <el-table-column
          label="创建时间"
          prop="createTime"
          align="center"
        />
        <el-table-column
          label="审核时间"
          prop="updateTime"
          align="center"
          width="180"
        /><el-table-column
          label="审核备注"
          prop="recordAuditOpinion"
          align="center"
        />
      </el-table>
    </el-dialog>

    <div class="block">
      <el-pagination
        :current-page="this.current"
        :page-sizes="[1,3,5,10,15,20]"
        :page-size="this.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
    import {
        resultResolve,
        addRoom,
        updateRoom,
        deleteRoom,
        listRoom,
        listAllCommunity,
        listAllBuilding,
        listAllUnit,
        findDictById
    } from '@/api/community'
export default {
  name: 'Index',

  data() {
    return {
      total: 0, // 查询的总数
      current: 1, // 当前页
      size: 5, // 每页显示的条数
      multipleSelection: [], // 多选框的集合
      ownerRoomList: [], // 业主房屋审核对象的集合
      Rooms: [],          //房间
      // 小区下拉框
      Communities: [],    //小区
      Buildings: [],    //楼栋
      Units: [],      //单元
      Owners:[],    //业主
      ownerRoom: { // 审核房屋对象
        ownerId:'',          //业主Id
        communityId:'',     //小区Id
        communityName: '', // 小区名字
        buildingId:'',     //楼栋Id
        buildingName: '', // 楼栋名字
        unitId:'',        //单元Id
        unitName: '', // 单元名字
        roomId:'',     //房间Id
        roomName: '', // 房间名字
        ownerRealName: '', // 业主名字
        ownerType: '', // 业主类型
        roomStatus: '', // 房屋状态
        remark: '', // 备注
        ownerRoomId: '', // 房间绑定表Id
        createTime: '', // 房间绑定表创建时间
        zoOwnerType: '' // 业主表的业主类型
      },
      indexRoomStatus: [
        {
          value: 'Binding',
          label: '已绑定'
        }, {
          value: 'Auditing',
          label: '审核中'
        }, {
          value: 'Reject',
          label: '审核失败'
        }
      ], // 房屋状态信息
      status: '',
      showSearch: true, // 显示/隐藏搜索栏
      dialogFormVisible: false, // 显示/隐藏审核弹出层
      formLabelWidth: '120px', // 弹出层输入框宽度
      auditRecordsVisible: false, // 审核记录表
      ownerRoomRecordList: [], // 房屋绑定记录表集合
      open:false,
      isAdd:false,
    }
  },
  // 钩子函数
  created() {
    this.loadPages(this.current, this.size, this.ownerRoom, this.status)
  },
  methods: {
    loadPages(currentPage, sizePage, ownerRoom, roomStatus) {
      this.axios.get('http://localhost:8080/zyOwnerRoom/zyOwnerRoomList',
        {
          params: {
            currentPage: currentPage,
            sizePage: sizePage,
            communityName: ownerRoom.communityName,
            roomStatus: roomStatus
          }
        })
        .then(res => {
          if (res.data.status == 'OK') {
            this.ownerRoomList = res.data.data.records,
            this.current = res.data.data.current,
            this.size = res.data.data.size,
            this.total = res.data.data.total
          }
        })
    },
    // 审核
    handleEdit(ownerRoom) {
      this.dialogFormVisible = true
      this.ownerRoom = this.qs.parse(this.qs.stringify(ownerRoom))
    },
    // 确认审核
    async confirmAudit(ownerRoom) {
      this.$confirm('是否确认审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
        center: true
      }).then(async() => {
        ownerRoom.roomStatus = 'Binding'
        await this.axios.put('http://localhost:8080/zyOwnerRoom/update',
          this.qs.parse(ownerRoom)
        ).then(res => {
          this.result(res)
        })
        // 添加审核记录信息
        await this.axios.post('http://localhost:8080/zyOwnerRoomRecord/add', ownerRoom)
        this.dialogFormVisible = false
        this.loadPages(this.current, this.size, this.ownerRoom, this.status)
      })
    },
    async badAudit(ownerRoom) {
      this.$confirm('是否拒绝审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
        center: true
      }).then(async() => {
        ownerRoom.roomStatus = 'Reject'
        await this.axios.put('http://localhost:8080/zyOwnerRoom/update',
          this.qs.parse(ownerRoom)
        ).then(res => {
          this.result(res)
        })
        // 添加审核记录信息
        await this.axios.post('http://localhost:8080/zyOwnerRoomRecord/add', ownerRoom)
        this.dialogFormVisible = false
        this.loadPages(this.current, this.size, this.ownerRoom, this.status)
      })
    },
      // 取消/关闭弹出层清空表单
      cancel(formName) {
          this.open = false
          this.ownerRoom = { // 审核房屋对象
              communityId:'',     //小区Id
              communityName: '', // 小区名字
              buildingId:'',     //楼栋Id
              buildingName: '', // 楼栋名字
              unitId:'',        //单元Id
              unitName: '', // 单元名字
              roomId:'',     //房间Id
              roomName: '', // 房间名字
              ownerRealName: '', // 业主名字
              ownerType: '', // 业主类型
              roomStatus: '', // 房屋状态
              remark: '', // 备注
              ownerRoomId: '', // 房间绑定表Id
              createTime: '', // 房间绑定表创建时间
              zoOwnerType: '' // 业主表的业主类型
          }
      },
    // 审核记录表显示/隐藏
    auditRecords(ownerRoom) {
      this.auditRecordsVisible = true
      this.axios.get('http://localhost:8080/zyOwnerRoomRecord/ownerRoomRecordList', {
        params: {
          ownerRoomId: ownerRoom.ownerRoomId
        }
      }).then(res => {
        this.ownerRoomRecordList = res.data.data
        this.ownerRoom = this.qs.parse(this.qs.stringify(ownerRoom))
      })
    },
    comboBox(val) {
      this.status = val
      this.loadPages(this.current, this.size, this.ownerRoom, this.status)
    },
    comboReset() {
      this.indexRoomStatus.value = ''
      this.status = ''
      this.loadPages(this.current, this.size, this.ownerRoom, this.status)
    },
    // 修改每页显示的数据条数
    handleSizeChange(size) {
      this.size = size
      this.loadPages(this.current, this.size, this.ownerRoom, this.status)
    },
    // 修改当前页面
    handleCurrentChange(current) {
      this.current = current,
      this.loadPages(this.current, this.size, this.ownerRoom, this.status)
    },
    // 多选框选择
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 重置表单数据
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 修改序号
    indexMethod(index) {
      index = (index + 1) + (this.current - 1) * this.size
      return index
    },
      handleAdd() {
          this.isAdd = true
          this.title = '添加审核记录'
          this.open = true
          this.loadCommunities()
          this.loadOwner()
      },
      async loadCommunities() {
          const res = await listAllCommunity()
          this.Communities = res.data
      },
      async loadBuilding(node) {
          this.ownerRoom.buildingId = ''
          this.ownerRoom.unitId = ''
          this.ownerRoom.roomId = ''
          const res = await listAllBuilding(node)
          this.Buildings = res.data
      },
      async loadUnit(node) {
          this.ownerRoom.unitId = ''
          this.ownerRoom.roomId = ''
          const res = await listAllUnit(node)
          this.Units = res.data
      },
      async loadRoom(node){
          this.ownerRoom.roomId = ''
          this.axios.get("http://localhost:8080/zyOwnerRoom/getAllRoomByUnitId/"+node).then(res => {
              this.Rooms = res.data.data
          })
      },
      async loadOwner(){
          this.axios.get("http://localhost:8080/zyOwner/list/").then(res => {
              this.Owners = res.data.data
          })
      },
      async submitForm(){
          console.log(this.ownerRoom)
          await this.axios.post("http://localhost:8080/zyOwnerRoom/addRoom",this.qs.stringify(this.ownerRoom))
              .then(res =>{
                  if (res.data == 'ok'){
                      this.$message({
                          message: '添加成功',
                          type: 'success'
                      });
                      this.axios.post('http://localhost:8080/zyOwnerRoomRecord/add', this.ownerRoom)
                  }else {
                      this.$message({
                          message: '该房屋已被绑定',
                          type: 'error'
                      });
                  }
                  this.open = false;
              })
          await this.loadPages(this.current, this.size, this.ownerRoom, this.status)
      },
    result(res) {
      if (res.data.data == 'ok') {
        this.$message({
          showClose: true,
          message: '操作成功',
          type: 'success',
          center: true
        })
      } else {
        this.$message({
          showClose: true,
          message: '出错了',
          type: 'error',
          center: true
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
